<script lang="ts" setup>
import { useUserStore } from '../stores/user';
const user = useUserStore()
</script>
<template>
  <!-- router route -->
  <!-- 需要隐藏的路由我们可以在元信息中配置一个 hidden = true -->
  <footer v-show="!$route.meta.hidden" class="footer">
    <!-- <div> -->
    <!--
          通过标签跳转是声明式导航
          通过 js 跳转叫编程式导航
         -->
    <router-link to="/home">
      <span class="iconfont icon-shouye"></span>
      <p>首页</p>
    </router-link>
    <router-link to="/kind">
      <span class="iconfont icon-fenlei"></span>
      <p>分类</p>
    </router-link>
    <router-link to="/cart">
      <span class="iconfont icon-gouwuche"></span>
      <p>购物车</p>
    </router-link>
    <router-link v-if="user.loginState" to="/user">
      <span class="iconfont icon-My"></span>
      <p>我的</p>
    </router-link>

    <router-link v-else to="/login">
      <span class="iconfont icon-My"></span>
      <p>未登录</p>
    </router-link>

    <!-- </div> -->
  </footer>
</template>
